<script setup>
import { computed, ref } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';

// 数据
const rawData = ref([
  {
    employeeNumber: '001',
    name: '韩蝾太',
    level: '普通',
    telephone: '13812345678',
    salary: '5000.00',
    note: '无',
  },
  {
    employeeNumber: '002',
    name: '李晨正',
    level: '经理',
    telephone: '13987654321',
    salary: '8000.00',
    note: '有项目经验',
  },
  {
    employeeNumber: '003',
    name: '郝森洋',
    level: '高管',
    telephone: '15898765432',
    salary: '12000.00',
    note: '擅长团队管理',
  },
  {
    employeeNumber: '004',
    name: '胡轩培',
    level: '经理',
    telephone: '13698765432',
    salary: '7500.00',
    note: '负责市场营销',
  },
  {
    employeeNumber: '005',
    name: '顾凌菡',
    level: '经理',
    telephone: '13698765432',
    salary: '10000.00',
    note: '哎呀',
  },
]);

// 表单
const form = ref({
  employeeNumber: '',
  name: '',
  password: '',
  level: '',
  telephone: '',
  salary: '',
  note: '',
});

const pageSize = ref(1);
const pageNum = ref(1);
const total = computed(() => rawData.value.length);
const dialogVisible = ref(false);
const formMode = ref('add');

// 分页事件处理
const tableData = computed(() => {
  const startIdx = (pageNum.value - 1) * pageSize.value;
  const endIdx = startIdx + pageSize.value;
  return rawData.value.slice(startIdx, endIdx);
});

function handleSizeChange(val) {
  pageSize.value = val;
  pageNum.value = 1; // 重置为第一页
}

function handleCurrentChange(val) {
  pageNum.value = val;
}

// 处理添加
const resetForm = () => {
  form.value = {
    employeeNumber: '',
    name: '',
    password: '',
    level: '',
    telephone: '',
    salary: '',
    note: '',
  };
  dialogVisible.value = true; // 打开对话框
};

const handleAdd = () => {
  rawData.value.push({
    employeeNumber: form.value.employeeNumber,
    name: form.value.name,
    level: form.value.level,
    telephone: form.value.telephone,
    salary: form.value.salary,
    note: form.value.note,
  });
  ElNotification.success('添加成功');
  dialogVisible.value = false;
};

const handleClose = () => {
  ElMessageBox.confirm('确认关闭？')
      .then(() => {
        dialogVisible.value = false;
      })
      .catch(() => {});
};

// 处理编辑
const handleEdit = (index, row) => {
  form.value = { ...row }; // 使用对象的解构来确保引用的复制
  dialogVisible.value = true;
  formMode.value = 'edit';
};

const handleEditConfirm = () => {
  const index = rawData.value.findIndex((item) => item.employeeNumber === form.value.employeeNumber);
  if (index !== -1) {
    rawData.value[index] = { ...form.value }; // 直接修改原始数据源
    ElNotification.success('编辑成功');
  }
  dialogVisible.value = false;
  formMode.value = 'add';
};

// 处理删除
const handleDelete = (employeeNum) => {
  ElMessageBox.confirm('确定删除该员工信息？')
      .then(() => {
        const index = rawData.value.findIndex((item) => item.employeeNumber === employeeNum);
        if (index !== -1) {
          rawData.value.splice(index, 1);
          ElNotification.success('删除成功');
        }
      })
      .catch(() => {});
};

//处理搜索
const handSearch =() =>{
}
</script>

<template>
  <!-- 搜索-->
  <div style="margin-bottom: 5px">
    <el-input placeholder="输入内容(如编号)" style="width: 200px;height: 40px"></el-input>
    <el-button style="height: 40px" @click="handSearch">查询</el-button>
  </div>

  <div>
    <el-table :data="tableData" style="width: 100%" class="el-table" max-height="600">
      <el-table-column label="员工编号" prop="employeeNumber"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="级别" prop="level"></el-table-column>
      <el-table-column label="电话" prop="telephone"></el-table-column>
      <el-table-column label="工资" prop="salary"></el-table-column>
      <el-table-column label="备注" prop="note"></el-table-column>
      <el-table-column label="Actions" align="right">
        <!-- 添加按钮 -->
        <template v-slot:header>
          <el-button type="primary" icon="el-icon-plus" style="width: 60px" @click="resetForm">添加</el-button>
        </template>
        <!-- 编辑和删除按钮 -->
        <template v-slot="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除？" @confirm="handleDelete(scope.row.employeeNumber)">
            <template v-slot:reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="custom-pagination"
    ></el-pagination>

    <!-- 对话框用来编辑和添加 -->
    <el-dialog title="员工信息编辑" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="员工编号">
          <el-input v-model="form.employeeNumber" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="级别">
          <el-input v-model="form.level" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.telephone" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="工资">
          <el-input v-model="form.salary" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.note" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="formMode.value === 'add' ? handleAdd() : handleEditConfirm()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.custom-pagination {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  padding: 10px;
  border-radius: 5px;
}

.el-table {
  background: rgba(211, 211, 211, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 5px;
}
</style>
